<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="js/vue.js"></script>
        <style>
            /* 开始 */
            .fade-enter {
                opacity: 0;
            }
           .fade-enter-to{
               opacity: 1;
           }
           .fade-enter-active{
               transition: all 3s;
           }
           /* 结束 */
          .fade-leave{
              opacity: 1;
          }
          .fade-leave-to{
              opacity: 0;
          }
          .fade-leave-active{
              transition: all 3s;
          }


            /* .slide-fade-enter-active{
                transition: all .3s ease;
            }
            .slide-fade-leave-active{
                transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
            }
            .slide-fade-enter, .slide-fade-leave-to{
                transform: translateX(10px);
                opacity: 0;
            } */

            
        </style>
    </head>
    <body>
        <div id="app">
            <button v-on:click="show = !show">展示与隐藏</button>
            <transition appear name='fade'>
                <p v-if="show">啊啊啊啊啊啊</p>
            </transition>
            <!-- <transition 
                name='slide-fade'
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter"
            >
                <p v-if="show">啊啊啊啊啊啊</p>
            </transition> -->
        </div>
        <script>
            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    show: true
                },
                methods: {
                    beforeEnter: function (el) {
                        console.log(el)
                    },
                    enter: function(el){
                        console.log(el)
                    },
                    afterEnter: function (el) {
                        console.log(el)
                    },
                },
            });
        </script>
    </body>
</html>